<template>
    <el-card class="form-container" shadow="never">
        <el-form :rules="addRules" ref="addForm" :model="addForm" label-width="160px" size="small">
            <el-form-item label="分类名称" :required="true">
                <el-input v-model="addForm.name" placeholder="分类名称"></el-input>
            </el-form-item>

            <el-form-item label="上级分类" :required="true">
                <el-select v-model="addForm.parentId" placeholder="请选择">
                    <el-option v-for="item in productCategoryOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>

            </el-form-item>
            <el-form-item label="数量单位" :required="true">
                <el-input v-model="addForm.productUnit" placeholder="数量单位"></el-input>
            </el-form-item>
            <el-form-item label="排序" :required="true">
                <el-input v-model="addForm.sort" placeholder="排序"></el-input>
            </el-form-item>

            <el-form-item label="是否显示">
                <el-radio v-model="addForm.showStatus" label="1">是</el-radio>
                <el-radio v-model="addForm.showStatus" label="0">否</el-radio>
            </el-form-item>

            <el-form-item label="是否显示在导航栏">
                <el-radio v-model="addForm.navStatus" label="1">是</el-radio>
                <el-radio v-model="addForm.navStatus" label="0">否</el-radio>
            </el-form-item>

            <el-form-item label="分类图标">
                <SingleUpload v-model="addForm.icon"></SingleUpload>
            </el-form-item>

            <el-form-item label="关键词">
                <el-input v-model="addForm.keywords" placeholder="关键词"></el-input>
            </el-form-item>
            
            <el-form-item label="描述">
                <el-input v-model="addForm.description" placeholder="描述"></el-input>
            </el-form-item>
            <el-form-item style="text-align: center;">
                <el-button type="primary" size="medium" @click="save">提交</el-button>
            </el-form-item>
        </el-form>
    </el-card>
</template>

<script>
import SingleUpload from '@/components/upload/SingleUpload'
import {addPmsProductCategory, queryPmsProductCategoryTopLevelList} from '@/api/pmsApi'
export default {
    name: 'PmsProductCategoryAdd',
    components: {
        SingleUpload
    },
    data() {
        return {
            productCategoryOptions:[

            ],
            addRules:{

            },
            addForm:{
                name: '',
                parentId: '0',
                productUnit: '',
                sort: '',
                showStatus: '0',
                navStatus: '0',
                keywords: '',
                description: '',
                icon: ''
            }
        }
    },
    created() {
        
    },
    mounted() {
        this.getProductCategoryTopLevelList();
    },

    methods: {
        getProductCategoryTopLevelList() {
            queryPmsProductCategoryTopLevelList({}).then(response => {
                const data = response.data;
                this.productCategoryOptions = [];
                data.forEach((item, index) => {
                    if (index == 0) {
                        this.addForm.parentId = item.id;
                    }
                    const objItem = {
                        value: item.id,
                        label: item.name
                    }
                    this.productCategoryOptions.push(objItem);
                });
            });
        },
        save() {
            let params = this.addForm;
            addPmsProductCategory(params).then(response => {
                this.$message("保存商品类型成功!");
                // 刷新商品分类数据
                this.getProductCategoryTopLevelList();
            });
        }
    }
}
</script>    

<style scoped>
    .form-container{
        text-align: left;
    }
</style>